{extend name="public/baseLayuimini"}
{block name="title"}
<title> 123</title>
{/block}
{block name="css"}
<script src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script>
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {margin: 0px;background: #fff;}
    .upload {width: 100px;height: 100px;border: 1px solid #ddd;background-repeat: no-repeat;background-size: 100% 100%;position: relative;}
    .upload .icon {width: 100%;height: 100%;display: flex;justify-content: space-evenly;align-items: center;font-size:26px;color: #999;position: absolute;left: 0;top: 0px;z-index:10;background-size: 100% 100%;background-repeat: no-repeat;}
    .fa-trash,.fa-repeat,.fa-search-plus {display: none}
    .upload .icon.uploaded:hover .fa-search-plus {display: block;}
    .upload .icon.uploaded:hover .fa-repeat {display: block;}
    .upload .icon.uploaded:hover .fa-trash {display: block;}
    .outbtn {
        position: absolute;
        right: -29px;
        top: 0;
        height: 38px;
        width: 30px;
        text-align: center;
        line-height: 38px;
        border: 1px solid #ddd;
        background: #fff;
        color: #333;
        cursor: pointer;
    }
</style>
{/block}
{block name="main"}
<form class="layui-form" action="" lay-filter="form">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">普通设置</li>
            <li>高级编辑</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">网站名称</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="id">
                        <input type="text" name="site_name" autocomplete="off" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">网址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="site_url" placeholder="以http://或https://开头" autocomplete="off" class="layui-input" lay-verify="url">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="phone" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="phone">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系QQ</label>
                        <div class="layui-input-inline">
                            <input type="text" name="qq" placeholder="请输入" lay-verify="number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="position: relative;">
                        <label class="layui-form-label">公司</label>
                        <div class="layui-input-block">
                            <select name="company_id"></select>
                        </div>
                        <button class="outbtn" type="button" data-type="company"><i class="layui-icon layui-icon-set"></i></button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">传真</label>
                        <div class="layui-input-inline">
                            <input type="text" name="fax" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">备案信息</label>
                        <div class="layui-input-inline">
                            <input type="text" name="record" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="position: relative;">
                        <label class="layui-form-label">网站语言</label>
                        <div class="layui-input-block">
                            <select name="language_id"></select>
                        </div>
                        <button class="outbtn" type="button" data-type="language"><i class="layui-icon layui-icon-set"></i></button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                        <input type="text" name="keyword" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">网站描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">公众号二维码</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="wx_qrcode">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">头部logo</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="hlogo">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">尾部logo</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="flogo">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">公共图片</label>
                        <div class="layui-input-inline upload">
                            <div class="icon">
                                <input type="hidden" name="public_img">
                                <i class="fa fa-cloud-upload"></i>
                                <i class="fa fa-trash"></i>
                                <i class="fa fa-repeat"></i>
                                <i class="fa fa-search-plus"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">高级内容</label>
                    <div class="layui-input-block">
                        <script id="editor" name="content" type="text/plain" style="width:95%;min-height: 514px;"></script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 100%;display: flex;justify-content: center;">
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">提交</button>
        <button class="layui-btn" lay-submit="form" lay-filter="demo2">重置</button>
    </div>
</form>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['form','miniTab','element','upload','layer'], function () {
        var form = layui.form, layer = layui.layer, miniTab = layui.miniTab,$ = layui.jquery, element = layui.element, upload = layui.upload,layer = layui.layer,id = '{$Request.param.id}'
        var ue = UE.getEditor('editor');
        getComLan()
        //管理公司和语言
        $(".outbtn").click(function () {
            let url = $(this).data('type') == 'company' ? '/admin/company' : '/admin/language'
            let title = $(this).data('type') == 'company' ? '公司管理' : '语言管理'
            layer.open({
                type:2,
                content:url,
                title:title,
                area:['700px','450px'],
                btn:['确定'],
                yes:(index,layero)=>{
                    getComLan()
                    layer.closeAll()
                },
                cancel:(i,o)=>{
                    getComLan()
                    layer.closeAll()
                }
            })
        })
        //监听提交
        form.on('submit(demo2)', function (data) {
            data = data.field
            $.ajax({
                url:'/admin/editSite',
                data,
                type:'post',
                success:res=>{
                    if(res){
                        layer.confirm('提交成功,是否继续添加？', {
                            btn: ['继续添加','返回上层'] //按钮
                        }, function(){
                            window.location.href = '/admin/editSite'
                        }, function(){
                            miniTab.deleteCurrentByIframe();
                        });
                    }
                }
            })
            return false;
        });
        //上传组件开始
        $(".fa-cloud-upload").click(function(){
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                id:'chooseImg',
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(this).prev('input').val(src).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded')
                    $(this).hide()
                    layer.close(index)
                }
            });
        })
        $(".fa-trash").click(function(){
            $(this).parent().removeClass('uploaded').css({backgroundImage: ''}).find('input').val('').parent().find('.fa-cloud-upload').show()
        })
        $(".fa-repeat").click(function(){
            var _this = this
            layer.open({
                type: 2,
                content: '/component/uploadImg',
                title:"图片编辑",
                area:['700px','450px'],
                btn:['确定'],
                yes: (index, layero)=>{
                    let src = $(layero).find('iframe')[0].contentWindow.src.value
                    $(_this).parent().css({backgroundImage:"url("+src+")"}).addClass('uploaded').find('input').val(src)
                    layer.close(index)
                },
                cancel: function(){
                    $(_this).parent().removeClass('uploaded').find('.fa-cloud-upload').show()
                }
            });
        })
        $(".fa-search-plus").click(function(){
            var src = $(this).parent().css("backgroundImage").substring(5,($(this).parent().css("backgroundImage").length - 2))
            src = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": [   //相册包含的图片，数组格式
                    {
                        "src": src, //原图地址
                    }
                ]
            }
            layer.photos({
                photos: src,
                //0-6的选择，指定弹出图片动画类型，默认随机
                anim: 5
            });
        })
        function getComLan(){
            $.ajax({
                url:"/admin/getCompanyLanguage",
                success:res=> {
                    let com = '',lan = ''
                    for(let v of res.company){
                        com += `<option value="${v.id}">${v.company_name}</option>`
                    }
                    for(let v of res.language){
                        lan += `<option value="${v.id}">${v.title}</option>`
                    }
                    $("select[name='company_id']").empty().append(com)
                    $("select[name='language_id']").empty().append(lan)
                    form.render('select');
                    if(id){
                        $.get('/admin/editSite',{id},obj=>{
                            form.val('form',{
                                id:obj.id,
                                site_name:obj.site_name,
                                site_url:obj.site_url,
                                phone:obj.phone,
                                qq:obj.qq,
                                company_id:obj.company_id,
                                fax:obj.fax,
                                record:obj.record,
                                email:obj.email,
                                language_id:obj.language_id,
                                address:obj.address,
                                keyword:obj.keyword,
                                description:obj.description,
                                wx_qrcode:obj.wx_qrcode,
                                hlogo:obj.hlogo,
                                flogo:obj.flogo,
                                public_img:obj.public_img
                            })
                            ue.setContent(obj.content ?? '')
                            if(obj.wx_qrcode) $("input[name='wx_qrcode']").parent().css({backgroundImage:"url("+obj.wx_qrcode+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                            if(obj.hlogo) $("input[name='hlogo']").parent().css({backgroundImage:"url("+obj.hlogo+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                            if(obj.flogo) $("input[name='flogo']").parent().css({backgroundImage:"url("+obj.flogo+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                            if(obj.public_img) $("input[name='public_img']").parent().css({backgroundImage:"url("+obj.public_img+")"}).addClass('uploaded').find('.fa-cloud-upload').hide()
                        })
                    }
                }
            })
        }

        //上传组件结束
        // $("#id").click(function(){
        //     miniTab.deleteCurrentByIframe();
        // })
    })
</script>
{/block}